<template>
    <div :style="{width: '100%', height: '100%'}" ref="chartRef"></div>
</template>

<script setup>
    import {useEcharts} from '@/hooks/useEcharts';

    const props = defineProps({
        width: String,
        height: String,
        theme: String,
        bgColor: String,
        title: String,
        subtitle: String,
        data: null,     // 曲线数据
        xAxisData: null // x轴数据
    });

    let bgColor = '#fff';
    let title = '总量';
    let color = ['#3751E6','#e9b1ff','#886EFF',];
    let echartData = [{"name": "运行", "value": "72"}, {
        "name": "停机", "value": "158"
    }, {"name": "故障", "value": "213"}];

    let formatNumber = function (num) {
        let reg = /(?=(\B)(\d{3})+$)/g;
        return num.toString().replace(reg, ',');
    }

    let total = echartData.reduce((a, b) => {
        return a + b.value * 1
    }, 0);

    // 设备状态
    const option = {
        textStyle: {
            color: '#fff',
        },
        color: color,
        backgroundColor: 'transparent',
        title: [{
            text: '{name|' + title + '}\n{val|' + formatNumber(total) + '}',
            top: 'center',
            left: 'center',
            textStyle: {
                rich: {
                    name: {
                        fontSize: 16,
                        fontWeight: 'normal',
                        color: '#8fd8e2',
                        padding: [10, 0]
                    },
                    val: {
                        fontSize: 16,
                        fontWeight: 'bold',
                        color: '#8fd8e2',
                    }
                }
            }
        }],
        legend: {
            orient: 'horizontal',
            icon: 'circle',
            itemWidth: 6,
            bottom: '1%',
            textStyle: {
                rich: {
                    name: {
                        fontSize: 12
                    },
                    value: {
                        fontSize: 12,
                        color: '#72d0e2',
                    },
                    unit: {
                        fontSize: 12
                    }
                }
            },
            formatter: function (name) {
                let res = echartData.filter(v => v.name === name);
                res = res[0] || {};
                let unit = '台';
                return '{name|' + name + '} {value|' + res.value + '} {unit|' + unit + '}'
            }
        },
        series: [{
                type: 'pie',
                radius: ['45%', '60%'],
                roseType: 'radius',
                center: ['50%', '50%'],
                data: echartData,
                labelLine: {
                    show: false,
                },
                label: {
                    show: false,
                },
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 0
                },
            },
        ]
    };

    //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
    function getCirlPoint(x0, y0, r, angle) {
        let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
        let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
        return {
            x: x1,
            y: y1
        }
    }

    const {
        chartRef,
        chart, nvll,
        echartsResizeFun
    } = useEcharts({props, option}); // {props: props, option: option}
</script>

<style scoped>
    :deep(.el-card__body) {
        padding: 0 !important;
    }
</style>